<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import FooterView from '@/components/FooterView.vue';
import { Classifyed, searchHot, searchFn } from '@/api/index'

const isShow = ref(false)

const router = useRouter();
// 定义一个响应式数组，用于管理每个分类项的展开状态
const isExpanded = ref(Array(5).fill(false));

// 切换展开状态的方法
const toggleExpand = (index) => {
    isExpanded.value[index] = !isExpanded.value[index];
}
// 返回首页
const jupmRouter = () => {
    router.push("/")
}
// 获取分类数据
const classify = ref([]);
// 存储根据 id 获取的详细数据
const detailedData = ref([]);
const getClassify = async () => {
    try {
        const content = await Classifyed();
        console.log('接口返回的完整数据', content);
        classify.value = content.data.result.cs;

        // cs 是一个数组 []  这种数据不能直接存储在本地  [object,object]
        // 所有需要把cs数组转字符串再存储到本地
        let cs = content.data.result.cs;
        localStorage.setItem("CS", JSON.stringify(cs))
        // 修正 forEach 参数，item 为数组元素，index 为索引
        classify.value.forEach((item, index) => {
            if (item.cs) {
                detailedData.value[index] = item.cs;
                // console.log(`第 ${index} 项的详细数据`, detailedData.value[index]);
            } else {
                detailedData.value[index] = [];
            }
        });
    } catch (err) {
        console.error('获取分类数据失败:', err);
    }
}
// 获取热门搜索数据
const searchlist = ref([])
const Getsearch = async () => {
    await searchHot().then(content => {
        // console.log("返回搜索接口数据", content);
        searchlist.value = content.data.result.suggestdetails
        // console.log("99999", searchlist.value);

    }).catch(err => {
        console.log(err);
    })
}
// 获取输入框和接口数据
const searchInput = ref();
const searchResults = ref([]);
const matResults = ref([]);
const perSearch = () => {
    if (searchInput.value == "") {
        alert("请输入搜索内容");
        return;
    }
    searchFn().then(content => {
        // console.log("返回输入框数据", content.data);
        searchResults.value = content.data.result.list;
        console.log("00000", searchResults.value);
        // 过滤
        searchResults.value.forEach(item => {
            if (item.r) {
                if (item.r.n.includes(searchInput.value)) {
                    matResults.value = item.r
                }
            }
            if (matResults.value) {
                isShow.value = true;
            }
            else {
                isShow.value = false;
            }
        });
        console.log('匹配结果', matResults.value);

    }).catch(err => {
        console.error(err);
    })

}
// 定义一个方法，用于处理热门搜索项的点击事件
const handleHotSearch = (title) => {
    searchInput.value = title;
    console.log('点击的热门搜索项:', title);

    perSearch();
}
// 清空输入框的方法
const clearInput = () => {
    searchInput.value = '';
    isShow.value = false; // 清空输入框时隐藏搜索结果
};
const jmpn = (name) => {
    router.push({
        path: '/food',
        query: {
            name
        }
    })
}

// 初始化
getClassify();
Getsearch();
// perSearch();

</script>
<template>
    <div class="classify">
        <div class="classify-heaer">
            <i class="i-arrow" @click="jupmRouter"></i>
            <h3>彪子有料</h3>
        </div>
        <!-- 输入框 -->
        <div class="classify-input">
            <div class="input-container">
                <input type="text" placeholder="炒锅牛肉" v-model="searchInput" @keyup.enter="perSearch">
                <i class="classify-search"></i>
                <i class="classify-del" @click="clearInput"></i>
            </div>
        </div>
        <!-- 热门搜索 -->
        <div class="classify-sousuo">
            <h3>热门搜索</h3>
            <div class="sousuo-list">
                <ul>
                    <li v-for="item in searchlist" :key="item.id" class="sousuo-list-li"
                        @click="handleHotSearch(item.title)"
                        :style="`color:${item.color}; border:1px solid ${item.borderColor} ; background-color:${item.background_color}`">
                        {{ item.title }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="classify-sousuo-list">
            <ul v-if="isShow">
                <li class="classify-sousuo-box">
                    <div class="sousuo-box-pic">
                        <img :src="matResults.img" alt="">
                        <p>{{ matResults.n }}</p>
                    </div>
                    <ul class="list-box">
                        <li class="sousuo-list-box" v-for="ritem in matResults.major">
                            {{ ritem.title }}
                        </li>
                    </ul>
                </li>
            </ul>
            <p v-else>暂无数据</p>
        </div>
        <!-- 全部分类 -->
        <h2>
            全部分类
        </h2>
        <div class="classify-popular-list">
            <ul v-if="classify.length != 0">
                <li v-for="(item, index) in classify" :key="index">
                    <div class="classify-shiling" @click="toggleExpand(index)">
                        <div class="classify-popular-img">
                            <img src="../assets/image/2.2-list.jpeg" alt="">
                        </div>
                        <span class="classify-popular-txt">{{ item.name }}</span>
                    </div>
                    <!--  -->
                    <transition name="slide-down">
                        <div v-if="isExpanded[index]" class="classify-list-cate">
                            <ul>
                                <li v-for="(subItem, subIndex) in detailedData[index]" :key="subIndex"
                                    class="classify-list-li">{{ subItem.name }}</li>
                                <!--  @click="jmpn(subItem.name)" -->
                            </ul>
                        </div>
                    </transition>
                </li>
            </ul>
        </div>

        <!--  -->
        <div class="classify-popular">
            <h2>怎么做好吃</h2>
            <ul>
                <li v-for="item in 5">
                    <router-link to="/">
                        <div class="classify-popular-box">
                            <div class="classify-list-left">
                                <img src="../assets/image/2.2-list.jpeg" alt="">
                            </div>
                            <div class="classify-right">
                                <p>#安家真草饲 营养护全家#疫苗光盘可乐11111111</p>
                                <span class="classify-span1">文本</span>
                                <div class="classify-icon">
                                    <div class="classify-icon-left">
                                        <i class=" icon-1 classify-icon-yanj"></i>
                                        <span>33707</span>
                                    </div>
                                    <div class="classify-icon-right">
                                        <i class=" icon-1 classify-icon-xingx"></i>
                                        <span>1268</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </router-link>
                </li>

            </ul>
        </div>

        <!-- 底部导航 -->
        <FooterView></FooterView>
    </div>
</template>
<style lang="less">
.classify {
    width: 100vw;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 60px;

    .classify-heaer {
        width: 100%;
        position: fixed;
        height: 60px;
        line-height: 60px;
        // background-color: #FFA940;
        align-items: center;
        display: flex;
        padding: 0 15px;
        z-index: 1000;
        border-bottom: 1px solid #ccc;
        background-color: #FFFFFF;

        .i-arrow {
            display: inline-block;
            width: 24px;
            height: 32px;
            background-image: url("../assets/image/arrow.png");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            margin-right: 10px;
        }

        h3 {
            font-size: 30px;
            font-family: aaa;
        }
    }

    .classify-input {

        margin-top: 60px;
        padding: 20px 20px;

        .input-container {
            position: relative;

            input {
                width: 100%;
                height: 40px;
                font-family: aaa;
                font-size: 16px;
                border-radius: 5px;
                border: 1px solid #ccc;
                padding-left: 30px;
                padding-right: 30px;
                font-size: 18px;
                font-weight: bold;
                background-color: #F5F5F5;
            }

            .classify-search {
                position: absolute;
                left: 10px;
                /* 距离左侧 10px */
                top: 50%;
                transform: translateY(-50%);
                display: inline-block;
                width: 20px;
                height: 20px;
                background-image: url("../assets/image/search.png");
                /* 替换为实际搜索图标路径 */
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                fill: #999999;
            }

            .classify-del {
                position: absolute;
                right: 10px;
                /* 距离右侧 10px */
                top: 50%;
                transform: translateY(-50%);
                display: inline-block;
                width: 16px;
                height: 16px;
                background-image: url("../assets/image/dle.png");
                /* 替换为实际删除图标路径 */
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                fill: #999999;
            }
        }
    }

    .classify-sousuo {
        padding: 0 20px;

        h3 {
            font-size: 20px;
            font-family: aaa;
        }

        ul {
            margin: 10px 10px;
            // border: 1px solid #ccc;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            padding: 10px 10px;
            flex-wrap: wrap;

            .sousuo-list-li {
                font-family: aaa;
                border: 1px solid #ccc;
                padding: 5px 5px;
                border-radius: 5px;
                margin: 5px 5px;
            }
        }

    }

    .classify-sousuo-list {
        padding: 0 20px;

        ul {
            li {
                .sousuo-box-pic {
                    display: flex;
                    align-items: center;
                    // justify-content: space-between;
                    margin-bottom: 10px;

                    img {
                        width: 80px;
                        height: 80px;
                        border-radius: 10px;
                        object-fit: cover;
                    }

                    p {
                        font-family: aaa;
                        font-size: 18px;
                        color: #302e2e;
                        font-weight: bold;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        margin-bottom: 5px;
                    }
                }

                .list-box {
                    margin: 10px 0px;
                    border: 1px solid #ccc;
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    padding: 10px 10px;
                    flex-wrap: wrap;


                    .sousuo-list-box {
                        border: 1px solid #ccc;
                        padding: 5px 5px;
                        border-radius: 5px;
                        margin: 5px 5px;
                    }
                }
            }
        }

        p {
            padding-bottom: 20px;
            color: #6E6F8B;
            font-family: aaa;
            font-size: 16px;
            text-align: center;
            /* 文本居中 */
            margin: 0 auto;
            /* 元素水平居中 */
            width: fit-content;
            /* 元素宽度根据内容自适应 */
        }
    }

    h2 {
        padding: 0px 20px;
        font-size: 24px;
        font-family: aaa;
        color: #302e2e;
        font-weight: bold;
    }

    .classify-popular-list {
        ul {
            width: 100%;
            padding: 10px 20px;

            li {
                width: 100%;
                margin-bottom: 10px;

                // width: 100%;
                .classify-shiling {
                    display: flex;
                    align-items: center;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #8a8888;
                }

                .classify-list-cate {
                    padding-top: 10px;

                    ul {
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        list-style: none;
                        // padding: 0;
                        margin: 0 -5px;
                    }

                    .classify-list-li {
                        padding: 5px 10px;
                        width: calc(33.33% - 10px);
                        margin: 0 5px 10px;
                        text-align: center;
                        border-radius: 5px;
                        border: 1px solid #ccc;
                        gap: 10px;
                        // margin-right: 10px;
                    }

                    .slide-down-enter-active,
                    .slide-down-leave-active {
                        transition: max-height 2s ease-in-out, opacity 2s ease-in-out;
                        overflow: hidden;
                    }

                    .slide-down-enter-from,
                    .slide-down-leave-to {
                        max-height: 0;
                        opacity: 0;
                    }

                    .slide-down-enter-to,
                    .slide-down-leave-from {
                        max-height: 200px;
                        /* 可根据实际内容调整 */
                        opacity: 1;
                    }
                }

                .classify-popular-img {
                    width: 60px;
                    height: 60px;
                    // border: 1px solid #ccc;
                    margin-right: 20px;
                    // border-radius: 10px;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 10px
                    }
                }

                .classify-popular-txt {
                    font-family: aaa;
                    font-size: 24px;
                    display: block;
                }
            }
        }
    }

    .classify-popular {
        padding: 20px 20px;

        h2 {
            font-family: aaa;
            font-size: 24px;
            color: #302e2e;
            font-weight: bold;
            margin-bottom: 10px;
        }

        ul {
            list-style: none;

            li {
                display: flex;
                align-items: center;
                // 盒子居中
                justify-content: center;
                margin-bottom: 10px;
                border-bottom: 2px solid #ccc;

                .classify-popular-box {
                    display: flex;
                    align-items: center;
                    // 盒子居中
                    justify-content: center;
                    margin-bottom: 20px; // 可根据需要添加底部外边距，让 li 元素之间有间距
                    // border-bottom: 2px solid #ccc;
                }

                .classify-list-left {
                    width: 150px;
                    height: 100px;
                    flex-shrink: 0;
                    margin-right: 10px;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                        object-fit: cover;
                    }
                }

                .classify-right {
                    font-family: aaa;

                    p {
                        font-size: 20px;
                        color: #302e2e;
                        font-weight: bold;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        margin-bottom: 5px;
                    }

                    .classify-span1 {
                        font-size: 16px;
                        color: #6E6F8B;
                        margin-bottom: 5px;
                    }

                    .classify-icon {
                        margin-top: 5px;
                        display: flex;
                        align-items: center;
                        width: 100%;

                        .classify-icon-left {
                            display: flex;
                            align-items: center;
                            margin-right: 20px;

                        }

                        .classify-icon-right {
                            display: flex;
                            align-items: center;
                            // margin-right: 20px;
                        }

                        .icon-1 {
                            width: 30px;
                            height: 30px;
                            display: inline-block;
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;
                            border-radius: 50%;
                            margin-right: 5px;
                        }

                        .classify-icon-yanj {
                            background-image: url("../assets/image/list-yanj.png");
                        }

                        .classify-icon-xingx {
                            background-image: url("../assets/image/list-xingx.png");
                        }
                    }
                }
            }
        }
    }
}
</style>